import style from "./style.module.less";
import { Descriptions } from "antd";
import { useSelector } from "react-redux";
import { tranDeviceToDescriptions } from "./helper";
import refreshImg from "@/assets/refresh.png";
import store, { setScreen } from "@/store";

function Device() {
  const device = useSelector((state) => tranDeviceToDescriptions(state.device)); //当前连接的设备信息
  const deviceObj = useSelector((state) => state.device); //当前连接的设备信息(原始数据)

  const onScreen = () => {
    const { value: deviceId } = deviceObj["ro.serialno"];
    store.dispatch(setScreen(deviceId));
  };

  return (
    <div className={style.device}>
      <div className={style["device-box"]}>
        {device.length === 0 ? (
          <div className={style.noDevice}>
            <>
              <div className={style.title}>当前没有连接设备</div>
              <div className={style.desc}>
                <div>1. 打开设备的开发者模式</div>
                <div>2. 请尝试重新插拔数据线</div>
              </div>
            </>
          </div>
        ) : (
          <div className={style["device-info"]}>
            <div className={style.iphone5s}>
              <div className={style.top}>
                <div>
                  <div className={style.listen}></div>
                  <div className={style.speaker}></div>
                </div>
              </div>
              <div className={style.content}>
                <img className={style.screen} src={deviceObj.screen} />
              </div>
              <div className={style.tools}>
                <img src={refreshImg} width={20} onClick={onScreen} />
              </div>
            </div>
            <Descriptions
              column={2}
              className={style["device-desc"]}
              bordered
              items={device}
            />
          </div>
        )}
      </div>
    </div>
  );
}

export default Device;
